<?php
$size = count($distances);
$sidebar =
'<ul id=\"rank-nav\"> 
    <li><a href=\"' . site_url("ranks/m/$stroke") . '\">Mehed</a></li>
    <li><a href=\"' . site_url("ranks/f/$stroke") . '\">Naised</a></li>
    <li class=\"divider\"></li> 
    <li><a href=\"' . site_url("ranks/$gender/free") . '\">Vabaltujumine</a></li>
    <li><a href=\"' . site_url("ranks/$gender/back") . '\">Seliliujumine</a></li>
    <li><a href=\"' . site_url("ranks/$gender/breast") . '\">Rinnuliujumine</a></li>
    <li><a href=\"' . site_url("ranks/$gender/fly") . '\">Liblikujumine</a></li>
    <li><a href=\"' . site_url("ranks/$gender/medley") . '\">Kompleks</a></li>
</ul>';

$sidebar = str_replace("\n", '\n', $sidebar);
?> 

<style>
    nav.sidebar { 
        left: 0px;
        position: absolute;
    }

    #rank-nav {
        top: 0;
    }

    #rank-nav.fixed {
        position: fixed;
        top: 0;
        bottom: 0;
        margin: 20px 0px;
    }
</style>

<script>
    
    // add parser through the tablesorter addParser method 
    $.tablesorter.addParser({ 
        // set a unique id 
        id: 'results', 
        is: function(s) { 
            // return false so this parser is not auto detected 
            return false; 
        }, 
        format: function(s) { 
            // format your data for normalization 
            return result_to_ms(s);
        }, 
        // set type, either numeric or text 
        type: 'numeric' 
    }); 
     
    $(".page-header").html("<h1>Eesti Ujumisliidu järgud</h1>");
    $(".sidebar").html("<?php echo $sidebar; ?>");
    $(document).ready(function() 
    { 
        var top = $('#rank-nav').offset().top - parseFloat($('#rank-nav').css('marginTop').replace(/auto/, 0));
        var height = (document.height !== undefined) ? document.height : document.body.offsetHeight;
        $(window).scroll(function (event) {
            var y = $(this).scrollTop();
            
            console.log('height: ' + height + ' y: ' + y);
            if (y >= top) {
                $('#rank-nav').addClass('fixed');
            } else {
                $('#rank-nav').removeClass('fixed');
            }
        });
        $(".tablesorter").tablesorter({ 
            headers: { 
                <?php
                for ($i = 0; $i < $size; $i++) {
                    $header = $i + 3;
                    echo "$header: {sorter:'results'},";
                }
                ?>
            } 
        }); 
    } 
); 
</script>

<table class="table rank-legend">
    <thead>
        <tr>
            <th>Eliit</th><th>Meister</th><th>I järk</th><th>II järk</th><th>III järk</th>
        </tr>
        <tr>
            <td class="rank-0"></td><td class="rank-1"></td><td class="rank-2"></td><td class="rank-3"></td><td class="rank-4"></td>
        </tr>
    </thead>
</table>

<table class="table rank tablesorter">
    <thead>
        <tr>
            <th>#</th>
            <th>Nimi</th>
            <th>Vanus</th>

            <?php
            foreach ($distances as $key => $value) {
                echo '<th class="text-center">' . $key . ' m</th>';
            }
            ?>
        </tr>

    </thead>
    <tbody>

        <?php
        $nr = 1;
        foreach ($values as $key => $row) {
            echo '<tr>';
            echo "<td>$nr</td>";
            echo '<td>' . $row['last_name'] . ', ' . $row['first_name'] . '</td>';
            echo '<td>' . $row['age'] . '</td>';
            for ($i = 0; $i < $size; $i++) {
                if (isset($row[$i])) {
                    echo '<td class="text-center rank-' . $row[$i]['rank'] . '">' . $row[$i]['result'] . '</td>';
                } else {
                    echo '<td></td>';
                }
            }
            echo '</tr>';
            $nr++;
        }
        ?>

    </tbody>

</table>